<template>
    <div class="blogDetails">
        <div class="blogCont">
            <h1 class="title">{{ bannerInfo.title }}</h1>
            <img :src="bannerInfo.cover_url" alt="cover" class="cover" />
            <p class="content" v-html="bannerInfo.content"></p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const bannerInfo = ref(JSON.parse(router.currentRoute.value.query.bannerInfo));
</script>

<style lang="less" scoped>
.blogDetails {
    height: 100%;
    overflow: auto;

    .blogCont {
        max-width: 1024px;
        margin: 32px auto;

        .title {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 20px;
            line-height: 1;
            color: #fff;
        }

        .cover {
            width: 100%;
            margin-bottom: 20px;
            display: block;
        }

        .content {
            font-size: 16px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.7);
        }

        .jumpBtn {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            p {
                width: 96px;
                height: 40px;
                background: linear-gradient(114.24deg, #FFB524 16.28%, #FF8C39 94.9%);
                box-shadow: 0px 1px 2px 0px #0000000D;
                font-size: 14px;
                border-radius: 6px;
                text-align: center;
                line-height: 36px;
                color: #000;
                cursor: pointer;
                font-weight: 600;
                // &:hover{
                //     color: #f00;
                // }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .blogDetails {
        .blogCont {
            padding: 0 0.3rem;

            .title {
                font-size: 0.3rem;
                line-height: 1.2;
            }

            .content {
                font-size: 0.14rem;
                line-height: 1.5;
            }

            .jumpBtn {
                p {
                    width: 0.8rem;
                    height: 0.32rem;
                    font-size: 0.14rem;
                    line-height: 0.32rem;
                }
            }
        }
    }
}
</style>
